import React from 'react'
import '../../less/index.less'
import { withRouter } from 'react-router-dom'
import { Button, Dropdown, Icon, Menu } from 'antd'
import { FormattedMessage } from 'react-intl'

const SubMenu = Menu.SubMenu

class TaskOperation extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      operation: ''
    }
  }

  getPrograms (programs) {
    const {operation} = this.state
    return programs.map((program, index) => {

      const {topics} = program
      return topics.length > 0?
        <SubMenu key={`program_${index}`} title={program.title}>
          {
            topics.map(topic => {
              return <Menu.Item
                style={{minWidth:150}}
                key={topic.id}
                onClick={() => this.props.taskOperation(program.organizationId, topic.id, operation)}>
                {topic.title}</Menu.Item>
            })
          }
        </SubMenu>
        :
        <Menu.Item key={index}>{program.title}</Menu.Item>
    })
  }

  getMenu (organizationPrograms) {
    const organizations = organizationPrograms.filter(item => !item.topics)
    if (organizations.length === 0) {
      return this.getPrograms(organizationPrograms)
    }
    return organizations.map((organization, index) => {
        const programs = organizationPrograms.filter(item => item.organizationId === organization.id)
        return <SubMenu key={`organization_${index}`}
                        title={<span><Icon type="project"/>
                          <span> <FormattedMessage id='组织'/> - {organization.title}</span>
                        </span>}>
          {this.getPrograms(programs)}
        </SubMenu>
      }
    )
  }

  map = (user, organizations, programsAndSubTopics) => {
    let result = []
    organizations.forEach(organization => {
      result.push({...organization})
      let programs = programsAndSubTopics.filter(program => program.organizationId === organization.id && !program.readOnly)
      result.push(...programs)
    })
    return result
  }

  render () {
    let {operationEnable, programsAndSubTopics, programId, user, organizations,isReadOnly} = this.props
    const organizationPrograms = this.map(user, organizations, programsAndSubTopics)
    const menuDuplication = this.getMenu(organizationPrograms)

    const menuMovement = this.getMenu(organizationPrograms.filter(program => program.id === parseInt(programId)))
    return operationEnable
      ? <div className='operation-group-btn'>
        <span><FormattedMessage id='勾选任务卡并'/>：</span>
        <Dropdown overlay={<Menu>{menuDuplication}</Menu>} trigger={['click']}>
          <Button
            onClick={() => this.setState({operation: 'copy'})}
            className='ant-dropdown-link'>
            <FormattedMessage id='批量复制任务卡'/>
            <Icon type='down'/>
          </Button>
        </Dropdown>
        <span className='ant-divider'/>
        <Dropdown overlay={<Menu mode='vertical'>{menuMovement}</Menu>} trigger={['click']}>
          <Button
            className='ant-dropdown-link'
            onClick={() => this.setState({operation: 'move'})}>
            <FormattedMessage id='批量移动任务卡'/>
            <Icon type='down'/>
          </Button>
        </Dropdown>
      </div>
      : <Button
        type='primary'
        disabled={isReadOnly}
        className='operation-group-btn'
        onClick={this.props.enableOperation}>
        <FormattedMessage id='任务卡批量操作'/>
      </Button>

  }
}

export default withRouter(TaskOperation)
